<!--  -->
<template>
  <div class="singer">
    <qq-music-header></qq-music-header>
    <qq-music-nav :isGreen="num"></qq-music-nav>
    <div class="top">
      <div class="pic"></div>
      <div class="songerdesc">
        <h1>{{ this.name }}</h1>
        <p>{{ this.songerdesc.briefDesc }}</p>
      </div>
    </div>
    <div class="songs">
      <h2>热门歌曲</h2>

      <li v-for="(item, index) in songs" :key="item.id">
        <span> {{ index + 1 }}</span>
       <p>{{ item.name }}</p>
      </li>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import QqMusicHeader from "@/components/header";
import QqMusicNav from "@/components/nav";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    "qq-music-header": QqMusicHeader,
    "qq-music-nav": QqMusicNav,
  },
  data() {
    //这里存放数据
    return {
      num: 0,
      songerdesc: [],
      songs: [],
    };
  },
  //监听属性 类似于data概念
  computed: {
    id: function () {
      if (this.$store.state.idList != "") {
        localStorage.setItem("songerid", this.$store.state.idList);
      }
      return localStorage.getItem("songerid");
    },
    name: function () {
      if (this.$store.state.nameList != "") {
        localStorage.setItem("songername", this.$store.state.nameList);
      }
      return localStorage.getItem("songername");
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getsongerdesc: async function () {
      let res = await this.$http.get("artist/desc", {
        params: {
          id: this.id,
        },
      });
      this.songerdesc = res.data;
      //   console.log(res);
    },
    getsongs: async function () {
      let res = await this.$http.get("/artist/top/song", {
        params: {
          id: this.id,
          limit: 10,
        },
      });
      this.songs = res.data.songs.splice(0, 10);
      // console.log(res);
      // console.log(this.songs);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getsongerdesc();
    this.getsongs();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.singer {
  .top {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: left;
    .pic {
      width: 300px;
      height: 300px;
      background: #ddd;
      border-radius: 50%;
    }

    .songerdesc {
      width: 900px;
      padding: 20px;
      h1 {
        font-weight:400;
      }

      p {
        padding: 10px 0;
        text-indent: 32px;
      }
    }
  }

  .songs {
    width: 1200px;
    margin: 40px auto;
    h2{
      margin-left: 40px;
    }

    li {
      margin-top: 30px;
      display: flex;
      font-weight: 300;
      height: 40px;
      line-height: 40px;
      margin-left: 30px;
      list-style: none;
      font-size: 22px;
      span{
        margin-right: 50px;
      color: #999;
      }
      p{
        cursor: pointer;
      }
      p:hover{
        color: #31c27c;
      }
    }
  }
}
</style>